<template>
  <Row :gutter="24">
    <Col v-bind="grid" class="ivu-mb">
      <Card :bordered="false" dis-hover :padding="12">
        <template #title><span>访问量</span></template>
        <template #extra><Tag color="green">日</Tag></template>
        <div>
          <Numeral :value="viewsData.today" format="0,0" v-font="30" />
          <div class="ivu-pt-8" v-height="42">
            <span v-display="'inline-block'" class="ivu-mr">
              日环比 <Trend flag="up">{{ viewsData.day_ratio }}</Trend>
            </span>
            <span v-display="'inline-block'">
              周环比 <Trend flag="down">{{ viewsData.week_ratio }}</Trend>
            </span>
          </div>
          <Divider style="margin: 8px 0" />
          <div>
            <Row>
              <Col span="12">总访问量</Col>
              <Col span="12" class="ivu-text-right">{{ viewsData.all }}</Col>
            </Row>
          </div>
        </div>
      </Card>
    </Col>
    <Col v-bind="grid" class="ivu-mb">
      <Card :bordered="false" dis-hover :padding="12">
        <template #title>
          <span>新增用户</span>
        </template>
        <template #extra>
          <Tooltip content="指标说明" placement="top">
            <Icon type="ios-help-circle-outline" />
          </Tooltip>
        </template>
        <div>
          <Numeral :value="userData.today" format="0,0" v-font="30">
            <template #suffix><span v-font="24"> 位</span></template>
          </Numeral>
          <div class="ivu-pt-8" v-height="42">
            <AvatarList
              size="small"
              :list="userData.head_portrait"
              :max="6"
              :excess-style="excessStyle"
            />
          </div>
          <Divider style="margin: 8px 0" />
          <div>
            <Row>
              <Col span="12">总用户</Col>
              <Col span="12" class="ivu-text-right">{{ userData.all }} 人</Col>
            </Row>
          </div>
        </div>
      </Card>
    </Col>
    <Col v-bind="grid" class="ivu-mb">
      <Card :bordered="false" dis-hover :padding="12">
        <template #title>
          <span>新增文档</span>
        </template>
        <template #extra><Tag color="blue">月</Tag></template>
        <div>
          <Numeral :value="arcData.month" format="0,0" v-font="30" />
          <div class="ivu-pt-8" v-height="42">
            <span v-display="'inline-block'" class="ivu-mr">
              月环比 <Trend flag="up">{{ arcData.month_ratio }}</Trend>
            </span>
          </div>
          <Divider style="margin: 8px 0" />
          <div>
            <Row>
              <Col span="12">总文档数</Col>
              <Col span="12" class="ivu-text-right">{{ arcData.all }}</Col>
            </Row>
          </div>
        </div>
      </Card>
    </Col>
    <Col v-bind="grid" class="ivu-mb">
      <Card :bordered="false" dis-hover :padding="12">
        <template #title>
          <span>新增预约</span>
        </template>
        <template #extra><Tag color="red">周</Tag></template>
        <div>
          <Numeral :value="appointData.all" format="0,0" v-font="30" />
          <div class="ivu-pt-8" v-height="42" ref="orderChart"></div>
          <Divider style="margin: 8px 0" />
          <div>
            <Row>
              <Col span="12">转化率</Col>
              <Col span="12" class="ivu-text-right">{{
                appointData.week_ratio
              }}</Col>
            </Row>
          </div>
        </div>
      </Card>
    </Col>
  </Row>
</template>
<script>
import { viewsList, userList, arcList, appointList } from '@/api/workbench'
import * as echarts from 'echarts'
export default {
  data () {
    return {
      grid: {
        xl: 6,
        lg: 12,
        md: 12,
        sm: 12,
        xs: 24
      },
      excessStyle: {
        color: "#f56a00",
        backgroundColor: "#fde3cf"
      },      
      viewsData: {},
      userData: {},
      arcData: {},
      appointData: {},
      xAxisWeek: [],
      seriesWeek: []


    }
  },
  beforeUnmount () {
    if (this.orderChart) {
      this.orderChart.dispose()
      this.orderChart = null
    }
  },
  mounted () {
    this.getviewsList()
    this._getuserList()
    this._getarcList()
    this._appointList()
  },
  methods: {
    //获取访问量
    getviewsList () {
      viewsList().then(res => {
        this.viewsData = res
      })
    },
    //获取新增用户
    _getuserList () {
      userList().then(res => {
        this.userData = res
      })
    },
    //新增文档
    _getarcList () {
      arcList().then(res => {
        this.arcData = res
      })
    },
    //新增预约
    _appointList () {
      appointList().then(res => {
        this.appointData = res
        // this.xAxisWeek = this.appointData.week.date
        this.xAxisWeek=['Mon','Tue','Wed','Thu','Fri','Sat','Sun']
        this.seriesWeek = this.appointData.week.num
        // console.log(this.xAxisWeek,'this.xAxisWeek')
        this.handleSetOrderChart()
      })
    },
    handleSetOrderChart () {
      let that = this
      this.orderChart = echarts.init(this.$refs.orderChart)
      this.orderChart.setOption({
        xAxis: {
          type: "category",
          data: [...that.xAxisWeek],
          show: false
        },
        yAxis: {
          type: "value",
          show: false
        },
        series: [{
          data: [...that.seriesWeek],
          type: "line",
          tooltip: true,
          smooth: true,
          symbol: "none",
          areaStyle: {
            normal: {
              opacity: 0.3
            }
          }
        }],
        color: "#00CC66",
        tooltip: {
          trigger: "axis"
        },
        grid: {
          left: -60,
          right: -20,
          bottom: -20,
          top: 4,
          containLabel: true
        }
      })
    },
    handleResize () {
      if (this.orderChart)
        this.orderChart.resize()
    }
  },
}
</script>
